import { useRef, useEffect } from "react";
import image from './123.png'
import pako  from 'pako'
function App() {
	// const origin = useRef<HTMLDivElement>(null);
    // const newData = useRef<HTMLDivElement>(null);

    const onclick = () => {
      const tmpData =  pako.deflate('base64')
      console.log(tmpData)
    }
useEffect(() => {
    const img = document.getElementById('image') as HTMLImageElement
    const preview = document.getElementById('preview')
    img.onload = () => {

        if(preview) {
            preview.setAttribute('style', `height:${img.offsetHeight}px;width:${img.offsetWidth}px`)
        }
    }
    },[])
    const dataToURL = () => {
        const canvas = document.createElement('canvas') as HTMLCanvasElement;
        const ctx =  canvas.getContext("2d");
        const img = document.getElementById('image') as HTMLImageElement
        const preview = document.getElementById('preview')

        if(img && ctx && preview) {
            canvas.setAttribute('width', `${img.offsetWidth}px`)
            canvas.setAttribute('height', `${img.offsetHeight}px`)
            ctx.drawImage(img, 0,0)
           const data =  canvas.toDataURL('image/jpeg', 0.8)
           preview.setAttribute('style', `height:${img.offsetHeight}px;width:${img.offsetWidth}px; background-image:url(${data})`)
           console.log(data)
        } 

    }
    return <div style={{
        display: "flex"
    }}>
        <div onClick={dataToURL}>按钮</div>
        <img id="image" src={image}/>
        <div id="preview" style={{
            display: "flex",

        }}></div>
    </div>
}


export default App;
